/**
* 描述：用户个人中心
*/
<style lang="scss" scoped>
  @import 'style/style';
</style>
<template>
  <div class="k-main-content">
    <div class="title-content">
      <div class="title-content-main">
        <el-row style="padding-top: 30px;">
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <div class="title-img"><img :src="detailCompanyData.logo?`/api/pub/image/${detailCompanyData.logo}`:`/static/images/web/index/companyLogo.jpg`" /></div>
              <div class="title-describe">
                <div><span class="title-describe-title">{{detailCompanyData.fullName}}</span></div>
                <div>
                  <div class="title-describe-content1">{{detailCompanyData.devStage | capitalStageFilter}}</div>
                  <div class="x-sidebar-left">|</div>
                  <div class="title-describe-content1 mg-left10">{{detailCompanyData.size | companyScaleFilter}}</div>
                  <div class="x-sidebar-left">|</div>
                  <div class="title-describe-content1 mg-left10">{{detailCompanyData.industry | industryFilter}}</div>
                  <div class="x-sidebar-left">|</div>
                  <div class="title-describe-content1 mg-left10">{{detailCompanyData.cityId | cityAndType}}</div>
                  <div class="clear"></div>
                </div>
                <!--<div><span class="title-describe-content1">{{detailCompanyData.fullName}}</span></div>-->
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple" style="float: right">
              <div class="fl-left right-content">
                <div class="border-right">
                  <span class="font-size24 color-1 line-height70">{{detailCompanyData.jobCount}}</span>
                  <span class="font-size14">/个</span>
                </div>
                <p>在招职位</p>
              </div>
              <div class="fl-left right-content">
                <div class="border-right">
                  <span class="font-size24 color-2 line-height70">{{detailCompanyData.applicantResponseRate}}%</span>
                </div>
                <p>简历处理率</p>
              </div>
              <div class="fl-left right-content">
                <div class="border-right">
                  <span class="font-size24 color-3 line-height70">暂无</span>
                </div>
                <p>面试评价（0）</p>
              </div>
              <div class="fl-left right-content text-center">
                <div class="last-right">
                  <div class="font-size14 color-1">1</div>
                  <div class="font-size14 color-1">小时前更新</div>
                </div>
                <p>最近登录</p>
              </div>
            </div>
            <div class="clear"></div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="body-content">
      <div class="body-content-tab fl-left">
        <Tabs value="name1">
          <TabPane label="公司简介" name="name1">
            <div class="introduction">
              <div class="title"><span class="mg-left10">公司介绍</span></div>
              <div class="introduction-content">
                <p v-for="item in detailCompanyData.descriptionList">{{item}}</p>
              </div>
              <!--<div class="introduction-content">-->
                <!--<span>中国平安官方直销网站，提供汽车保险、意外保险、家庭财产保险、自助保险卡等保险网上销售；私家车商业险多省15%平安官网车险计算器报价精准实在，意外保险、旅游保险低至3折，还有多款自助保险卡可供选择</span>-->
                <!--<a class="color-1 mg-left10">展开</a>-->
              <!--</div>-->
            </div>
            <div class="introduction mg-top50">
              <div class="title"><span class="mg-left10">工作地址</span></div>
              <div class="introduction-content fl-left">{{detailCompanyData.cityId | cityAndType}} - {{detailCompanyData.address}}</div>
              <div class="introduction-contenmain-labelt fl-right">收起地图</div>
              <div class="clear"></div>
              <div class="mg-top20 map" id="container"></div>
            </div>
            <!--<div class="introduction mg-top50">-->
              <!--<div class="title">-->
                <!--<span class="mg-left10">更多职位推荐</span>-->
                <!--<a class="mg-left10 fl-right">更多</a>-->
              <!--</div>-->
              <!--<div class="dotted-line"></div>-->
              <!--<div class="main-label">-->
                <!--<el-button round size="medium" class="label-content">php招聘</el-button>-->
                <!--<el-button round size="medium" class="label-content">产品经理招聘</el-button>-->
                <!--<el-button round size="medium" class="label-content">php招聘</el-button>-->
                <!--<el-button round size="medium" class="label-content">php招聘</el-button>-->
                <!--<el-button round size="medium" class="label-content">php招聘</el-button>-->
                <!--<el-button round size="medium" class="label-content">php招聘</el-button>-->
                <!--<el-button round size="medium" class="label-content">php招聘</el-button>-->
                <!--<el-button round size="medium" class="label-content">php招聘</el-button>-->
              <!--</div>-->
            <!--</div>-->
            <div class="clear"></div>
          </TabPane>
          <TabPane :label="`招聘职位（${detailCompanyData.jobCount}）`" name="name2">
            <div class="searchResult buleShadow" style="margin-bottom:20px;">
              <span class="tabTitle">职位：</span>
              <a class="tab" :class="jobType===null?'tabCur':''" @click="jobType=null">全部</a>
              <a class="tab" :class="jobType===0?'tabCur':''" @click="jobType=0">全职</a>
              <a class="tab" :class="jobType===1?'tabCur':''" @click="jobType=1">兼职</a>
              <a class="tab" :class="jobType===2?'tabCur':''" @click="jobType=2">实习</a>
              <div class="clear"></div>
            </div>
            <div class="searchResult buleShadow">
              <div class="one-result" v-for="item in jobList" @click="goToJobDetail(item.id)">
                <div class="main">
                  <div class="name" @click="goToJobDetail(item.id)">{{item.title}}</div>
                  <div class="info"><i>{{item.cityId | cityAndType}}</i><i>|</i>{{item.experience | experience }}<i></i><i>|</i><i>{{item.education | education }}</i></div>
                  <div class="time">发布于 {{item.createdAt}}</div>
                  <div class="clear"></div>
                  <div class="hr"></div>
                  <div class="money">{{item.salary | salaryState}}</div>
                  <div class="clear"></div>
                  <div class="bottomHr"></div>
                </div>
                <div class="clear"></div>
              </div>
            </div>
          </TabPane>
          <!--<TabPane label="校园招聘" name="name3">没有信息</TabPane>-->
        </Tabs>
      </div>
      <div class="fl-left body-content-sidebar">
        <!--<div class="sidebar-content">-->
          <!--<div class="sidebar-title"><span>公司标签</span></div>-->
          <!--<div class="dotted-line"></div>-->
          <!--<div class="sidebar-main-label">-->
            <!--<el-button round size="mini" class="label-content">技术培训</el-button>-->
            <!--<el-button round size="mini" class="label-content">技术培训</el-button>-->
            <!--<el-button round size="mini" class="label-content">技术培训</el-button>-->
            <!--<el-button round size="mini" class="label-content">技术培训</el-button>-->
            <!--<el-button round size="mini" class="label-content">技术培训</el-button>-->
            <!--<el-button round size="mini" class="label-content">技术培训</el-button>-->
            <!--<el-button round size="mini" class="label-content">技术培训</el-button>-->
            <!--<el-button round size="mini" class="label-content">技术培训</el-button>-->
          <!--</div>-->
          <!--<div class="clear"></div>-->
        <!--</div>-->
        <!--<div class="mg-top20 sidebar-content">-->
          <!--<div class="sidebar-title"><span>公司详情</span></div>-->
          <!--<div class="dotted-line"></div>-->
          <!--<div class="sidebar-main-label">-->
            <!--<Timeline>-->
              <!--<TimelineItem color="green">公司介绍</TimelineItem>-->
              <!--<TimelineItem color="green">工作地址</TimelineItem>-->
              <!--<TimelineItem color="red">面试评价</TimelineItem>-->
            <!--</Timeline>-->
          <!--</div>-->
        <!--</div>-->
      </div>
      <div class="clear"></div>
    </div>
    <div class="clear"></div>
  </div>
</template>
<script>
   import map from '@/js/mixins/map';
   import AMap from 'AMap';
   import { detailCompany } from '@/service/web/detailService/detailMService';
   import { queryList, queryCount } from '@/service/web/searchJobsFlow/searchMService';
   export default {
    mixins: [map],
    data () {
      return {
        loading: false,
        jobList: [],
        pageCount: 0,
        searchData: {
          pageNo: 1,
          pageSize: 5
        },
        jobType: null,
        detailCompanyData: {}
      };
    },
    async mounted () {
      await this._initMap('container', 10);
      const res = this.$route.query;
      this.detailCompany(res.id);
    },
    methods: {
      // 获取企业详情
      async detailCompany (id) {
        let result = await detailCompany({id: id});
        this.detailCompanyData = result.data;
        this.detailCompanyData.descriptionList = [];
        if (this.detailCompanyData.latitude && this.detailCompanyData.longitude) this.addMarker([this.detailCompanyData.longitude, this.detailCompanyData.latitude]);
        if (this.detailCompanyData.description) {
          this.detailCompanyData.description = this.detailCompanyData.description.replace(/\n/g, ';');
          this.detailCompanyData.descriptionList = this.detailCompanyData.description.split(';');
        }
        this.getList();
      },
      // 地图添加maker
      async addMarker (position) {
        this.map.panTo(position);
        this.map.setZoom(17);
        let marker = null;
        marker = new AMap.Marker({
          map: this.map,
          position: position,
          autoRotation: true
        });
        return marker;
      },
      // 查询列表
      async getList (type) {
        let params = Object.assign({}, this.searchData);
        this.loading = true;
        params.companyId = this.detailCompanyData.id;
        params.type = type;
        let result = await queryList(params);
        let temp = await queryCount();
        if (!result.data.length) result.data = null;
        this.jobList = result.data || [];
        this.pageCount = temp.data || 0;
        this.loading = false;
      },
      // 当前页改变时
      handleCurrentChange (val) {
        this.searchData.pageNo = val;
        this.getList();
      },
      // pageSize改变时
      handleSizeChange (val) {
        this.searchData.pageSize = val;
        this.getList();
      },
      // 跳转到职务详情
      goToJobDetail (id) {
        this.$router.push({path: '/jobDetail', query: {id: id}});
      }
    },
    watch: {
      jobType (val) {
        this.getList(val);
      }
    }
  };
</script>
